<template>
  <div class="creat_en_vue_content">
    <Header name="mvvm" ref="header" />
    <el-input
      type="text"
      size="small"
      placeholder="请输入内容"
      class="input1"
      v-model="input"
      clearable
    >
    </el-input>
    <div style="display: flex; flex-direction: column">
      <span class="header3"> 数据实时更新 </span>
      <span class="common_body">
        {{ input }}
      </span>

      <span class="header3"> method更新 </span>
      <span class="common_body">
        {{ getStr() }}
      </span>

      <span class="header3"> watch更新 </span>
      <span class="common_body">
        watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。
        可以通过watch动态改变关联的状态。
        <br />
        只能监控一个值的变化
      </span>
      <span class="common_body">
        {{ input2 }}
      </span>

      <span class="header3"> computed更新 </span>
      <span class="common_body"> 可以监听多个属性 </span>
      <span class="common_body">
        {{ computeInput }}
      </span>
      <span class="common_body">
        {{ input3 }}
      </span>
      <span style="white-space: pre">
        计算属性 vs 方法<br />
        在Vue中计算属性是基于它们的依赖进行缓存的，<br />
        而方法是不会基于它们的依赖进行缓存的<br />
        。从而使用计算属性要比方法性能更好<br />
      </span>
      <span class="common_body">
        {{ getStrCom() }}
      </span>
      <el-button style="width: 100px" type="primary" @click="changeList"
        >改变list</el-button
      >
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mvvm",
  computed: {
    computeInput() {
      console.log("执行了computeInput");

      return this.input + this.str;
    }
  },
  watch: {
    input: {
      handler(val) {
        this.input2 = val
          .split("")
          .reverse()
          .join("");
      },
      deep: true
    }
    // obj: {
    //
    //   handler(val) {
    //     this.input2 = val.split("").reverse().join("");
    //     this.obj.input = val;
    //   },
    //   deep: true
    // }
  },
  data() {
    return {
      list: ["si"],
      input: "",
      input2: "",
      str: "hello",
      input3: this.input + this.input2
    };
  },
  methods: {
    changeList() {
      this.list.push("si");
    },
    getStr() {
      return this.input;
    },
    getStrCom() {
      console.log("执行了getStrCom");
      return this.input + this.str;
    }
  },
  created() {},
  mounted() {}
};
</script>

<style scoped lang="stylus">
@import 'components/common_md_class.styl';

.input1 {
  width: 300px;
}

.creat_en_vue_content {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 32px;
  flex-direction: column;
  align-items: flex-start;
}

.creat_en_vue_page {
  display: flex;
  flex-direction: column;

  span {
    padding-top: 4px;
  }
}
</style>
